<template>
	<div class="ntk_Login_body">
		<div class="log_td"><input class="log_inp" name="IDCard" placeholder="您的身份证件号码" /></div>
		<div class="log_td"><input class="log_inp" name="name" placeholder="您的姓名" /></div>
		<div class="log_td"><input class="log_inp" name="phoneNumber" placeholder="您所使用的电话号码" /></div>
		<div class="log_td"><input class="log_inp" name="e_mail" placeholder="您所使用的 E_mail " /></div>
		<div class="log_td">
			<div :class="[state.verify ? 'verify_flex_T' : 'verify_flex_F']">
				<transition name="verify_inp"><input class="log_verify" name="verification" v-show="state.verify" placeholder="请求输入验证码" /></transition>
				<button class="verify_btn" @click="verifyBy('Phone')">Phone{{ state.verify ? '重' : '&#09;' }}验证</button>
				<button class="verify_btn" @click="verifyBy('E_mail')">E_mail{{ state.verify ? '重' : '&#09;' }}验证</button>
			</div>
		</div>
		<div class="log_td"><button class="from_btn">注册</button></div>
	</div>
</template>

<script setup>
import { reactive } from 'vue';
let state = reactive({ verify: false });
function verifyBy(way) {
	state.verify = true;
	alert(way);
}
</script>

<style scoped lang="scss">
.ntk_Login_body {
	width: 80%;
	margin: 2.5% auto;
}
.log_td {
	width: 100%;
	height: 10%;
}

.log_inp {
	font-size: 25px;
	width: 60%;

	margin: 2.5% 0;
	padding: 8px 0px 2px 8px;

	border: 0px;
	border-bottom: 2px solid rgba(105, 66, 32, 0.8);

	outline: none;

	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
}

.log_verify {
	font-size: 25px;

	width: 308px;

	margin: 2.5% 0;
	padding: 8px 0px 2px 8px;

	border: 0px;
	border-bottom: 2px solid rgba(105, 66, 32, 0.8);

	outline: none;

	background-color: rgba(0, 0, 0, 0);
	backdrop-filter: blur(0px);
}

.verify_flex_F {
	width: calc(60% + 8px);
	height: 10%;
	margin: 2.5% auto;

	display: flex;
	justify-content: center;
	flex: 1 1;
}

.verify_flex_T {
	width: calc(60% + 8px);
	height: 10%;
	margin: 2.5% auto;

	display: flex;
	justify-content: space-between;
	flex: 316px 1 1;
}
.verify_btn {
	font-size: 12px;

	border: 0px;
	border-bottom: 2px solid rgba($color: #00e500, $alpha: 0.7);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;

	margin: 2.5% 5px 2.5% 15px;
	padding: 10px 20px;

	cursor: pointer;

	background-color: rgba($color: #00e500, $alpha: 0.7);
}

.from_btn {
	font-size: 25px;

	border: 0px;
	// border-bottom: 2px solid rgba($color: #00e500, $alpha: 0.7);
	// border-bottom-left-radius: 6px;
	// border-bottom-right-radius: 6px;

	border-radius: 5px;
	margin: 2.5% 20px;
	padding: 15px 40px;

	cursor: pointer;
	background: #2193b0; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, rgb(33, 147, 176), rgb(109, 213, 237)); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, rgb(33, 147, 176), rgb(109, 213, 237)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	// background-color: rgba($color: #00e500, $alpha: 0.7);
}
.from_btn:active {
	margin: 2.5% 20px;
	padding: 13px 38px;
	// box-sizing: border-box;
	border: 2px solid rgba($color: #43676b, $alpha: 0.7);
}

.verify_inp-enter-active,
.verify_inp-leave-active {
	animation-name: verify_inpIN;
	animation-duration: 1s;
	animation-timing-function: ease-out;
	// animation-fill-mode: forwards;
}

.verify_inp-enter-from,
.verify_inp-leave-to {
	opacity: 0;
}

@keyframes verify_inpIN {
	0% {
		width: 0px;
		// margin-right: 0px;
		opacity: 0;
	}
	30% {
		width: 0px;
		margin-right: 420px;
		opacity: 0;
	}
	49% {
		width: 0px;
		margin-right: 528.2px;
		opacity: 0;
	}
	50% {
		width: 308px;
		margin-right: 220.2px;
		opacity: 0;
	}
	79% {
		opacity: 1;
	}
	100% {
	}
}
</style>
